Vue.component('top-bar', {
    template:
        `
	<div class="top-bar" :class="'player-'+currentPlayerIndex">
		<div class="player p0">{{players[0].name}} </div>
		<div class="turn-counter">
			<img src="svg/turn.svg" class="arrow" alt=""/>
			<div class="turn">Turn {{ turn }} </div>
		</div>
		<div class="player p1">{{players[1].name}} </div>
	</div>
	`,
    props: ['players', 'currentPlayerIndex', 'turn'],
})

Vue.component('card', {
    props: ['def'],
    template: `
		<div class="card" :class="'type-'+def.type" @click="play">
			<div class="title">{{def.title}}</div>
			<img src="../svg/card-separator.svg" class="separator" alt=""/>
			<div class="description">
				<div v-html="def.description"></div>
			</div>
			<div class="note" v-if="def.note">
				<div v-html="def.note"></div>
			</div>
		</div>
	`,
    methods: {
        play() {
            this.$emit('play')
        }
    }
})

Vue.component('hand', {
    template: `
		<div class="hand">
			<div class="wrapper">
			<transition-group
			    name="card"
			    tag="div"
			    class="cards"
			>
			    <card 
			    v-for="card of cards" 
			    :def="card.def"
			    @play="handlePlay(card)"
			    :key="card.uid"
			    ></card>
            </transition-group>
            </div>
        </div>
		`,
    props: ['cards'],
    methods: {
        handlePlay(card) {
            this.$emit('card-play', card)
        }
    }
})

Vue.component('overlay', {
    template: `
        <div class="overlay" @click="handleClick">
            <div class="content">
                <slot></slot>
            </div>
        </div> 
    `,
    methods: {
        handleClick() {
            this.$emit('close')
        }
    }
});

Vue.component('overlay-content-player-turn', {
    template: `
          <div>
               <div class="big" v-if="player.skipTurn">{{player.name}}
               <br>
               Your turn is skipped!
               </div>
               <div class="big" v-else>{{player.name}}</div>
                <div>Tap to continue</div>
          </div>`,
    props: ['player'],
});
